import React, {Component} from "react"
import {View, Text, StyleSheet, Alert, Image} from "react-native";
import {Carousel,Button} from "@ant-design/react-native";
import {connect} from "react-redux";
import LinearGradient from 'react-native-linear-gradient';
import {SCREEN_WIDTH,SCREEN_HEIGHT,getImageRatio} from "../../static/js/tools";


interface IProps {
    navigation?:any
}
class Guide extends Component<IProps>{
    public props:IProps={};
    constructor(props: IProps | Readonly<IProps>){
        super(props);
        this.props = props;
    }
    /**
     * @Author Training
     * @Desc 点击按钮进入首页
     * @Params none
     * @Return none
     */
    private start=()=>{
        this.props.navigation.navigate("Main");
    };
    render() {
        return (
            <View style={styles.wrapper}>
                <Carousel
                    style={styles.wrapper}
                    autoplay={true}
                    dotStyle={styles.wrapperDotStyle}
                    dotActiveStyle={styles.wrapperDotStyleActive}
                >
                    <View style={styles.item}>
                        <Image style={styles.img} source={require("../../static/images/guide/1.png")} />
                        <View>
                            <Text style={[styles.title,{fontSize:18}]}>带上新手礼包</Text>
                            <Text style={styles.title}>去探索新世界吧</Text>
                        </View>
                    </View>
                    <View style={styles.item}>
                        <Image style={styles.img} source={require("../../static/images/guide/2.png")} />
                        <View>
                            <Text style={[styles.title,{fontSize:18}]}>玩游戏，就来游拼拼！</Text>
                            <Text style={styles.title}>新服大放送，礼包等你来！</Text>
                        </View>
                    </View>
                    <View style={styles.item}>
                        <Image style={styles.img} source={require("../../static/images/guide/3.png")} />
                        <View>
                            <Text style={[styles.title,{fontSize:18}]}>游拼拼，全新来袭</Text>
                            <LinearGradient colors={['#8CBEFF','#5994FE']} style={styles.button}>
                                <Button onPress={this.start} style={[{backgroundColor:"rgba(0,0,0,0)",borderWidth:0},styles.button]} activeStyle={{backgroundColor:"rgba(0,0,0,0)",opacity:1}}><Text style={{color:"white"}}>立即体验</Text></Button>
                            </LinearGradient>
                        </View>
                    </View>
                </Carousel>
            </View>
        );
    }
}
const imgRatio:number = getImageRatio(require("../../static/images/guide/1.png"));
const styles:any = StyleSheet.create({
    wrapper: {
        backgroundColor: '#fff',
        height:SCREEN_HEIGHT,
        width:SCREEN_WIDTH
    },
    item:{
        flexGrow:1,
        alignItems:"center",
        // justifyContent:"center"
    },
    wrapperDotStyle:{
        bottom:50,
        backgroundColor: "rgba(63,142,252,0.51)"
    },
    wrapperDotStyleActive:{
        backgroundColor: "#3D8DFD",
    },
    img:{
        width: SCREEN_WIDTH,
        height:SCREEN_WIDTH/imgRatio,
        resizeMode: 'stretch',
        marginTop:110,
        marginBottom:50
    },
    title:{
        color:"#131313",
        textAlign:"center",
        fontSize: 14,
        marginBottom: 20
    },
    button:{
        borderRadius:24,
        height:47,
        width:188
    }
});
let  mapStateToProps = (state:any)=>({

});
export default connect(mapStateToProps)(Guide)
